<!DOCTYPE html>
<html lang="en">
  <head>
    
      <title>django&#43;vue实现搜索功能 :: Rennan Blog — We can exchange and study together</title>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="description" content="Vue部分 使用了heyui控件来实现了搜索框的展示 并双向绑定了work
&amp;lt;!-- 搜索 --&amp;gt;&amp;lt;Search v-model=&amp;quot;work&amp;quot; @search=&amp;quot;search&amp;quot;&amp;gt;&amp;lt;/Search&amp;gt;export default {data(){return{work:&amp;quot;&amp;quot;}},}上列操作完成后 就开始search方法 跳转到即将构造search页面 this.$router.push和window.location.href跳转的不同之处在于 this.$router.push当他这个请求的地址自己当前的地址相同的话他不会跳转（这些都是写在一个通用化组件的时候） 而另一种方法可以进行跳转
// 搜索search(){	// this.$router.push({&#39;path&#39;:&amp;quot;/search&amp;quot;,&amp;quot;query&amp;quot;:{&#39;work&#39;:this.work}})window.location.href = &#39;http://127.0.0.1:8080/search?work=&#43;this.work},search页面 首先得接收通用化组件传来的参数work 然后根据获取到的work传到后端
export default {data(){return{work:this.$route.query.work,}},}定义的axios方法
请求后端的goodsearch/接口
getgoods(){this.axios.get(this.adminurl &#43; &#39;/goodsearch/&#39;,{params:{work:this.work}}).then(res=&amp;gt;{this.data = res.datathis.isdata = res.data.length})} django后台 定义后台接口 接受前端传过来的 关键字参数 并进行模糊查询 goodslist = Goods.objects.filter(Q(name__icontains=work)|Q(desc__icontains=work)) 该orm查询 相当于 select * from goods where goods."/>
<meta name="keywords" content=""/>
<meta name="robots" content="noodp"/>
<link rel="canonical" href="/my_blog/post/search/" />





<link rel="stylesheet" href="/my_blog/assets/style.css">


<link rel="stylesheet" href="/my_blog/style.css">


<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/my_blog/img/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="/my_blog/img/favicon.png">


<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="django&#43;vue实现搜索功能"/>
<meta name="twitter:description" content="搜索功能的实现"/>



<meta property="og:title" content="django&#43;vue实现搜索功能" />
<meta property="og:description" content="搜索功能的实现" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/my_blog/post/search/" />
<meta property="article:published_time" content="2019-05-05T00:00:00+00:00" />
<meta property="article:modified_time" content="2019-05-05T00:00:00+00:00" /><meta property="og:site_name" content="Rennan Blog" />






  </head>
  <body class="">
    <div class="container">
      <header class="header">
  <span class="header__inner">
    <a href="/my_blog/hello/" class="logo" style="text-decoration: none;">
  
    <span class="logo__mark"><svg xmlns="http://www.w3.org/2000/svg" class="greater-icon" viewBox="0 0 44 44">
  <path fill="none" d="M15 8l14.729 14.382L15 35.367"/>
</svg>
</span>
    <span class="logo__text">Welcome To MyBlog</span>
    <span class="logo__cursor"></span>
  
</a>

    <span class="header__right">
      
        <nav class="menu">
  <ul class="menu__inner menu__inner--desktop">
    
      
        
          <li><a href="/my_blog/resume">resume</a></li>
        
      
        
          <li><a href="/my_blog/vue">vue</a></li>
        
      
      
    
  </ul>

  <ul class="menu__inner menu__inner--mobile">
    
      
        <li><a href="/my_blog/resume">resume</a></li>
      
    
      
        <li><a href="/my_blog/vue">vue</a></li>
      
    
  </ul>
</nav>

        <span class="menu-trigger">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M0 0h24v24H0z" fill="none"/>
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
          </svg>
        </span>
      
      <span class="theme-toggle">
        <svg class="theme-toggler" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
  3C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
  13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"/>
</svg>

      </span>
    </span>
  </span>
</header>


      <div class="content">
        
  
  

  <div class="post">
    <h2 class="post-title"><a href="/my_blog/post/search/">django+vue实现搜索功能</a></h2>
    <div class="post-meta">
      
        <span class="post-date">
          5056-08-05
        </span>

        
          
        
      

      <span class="post-author">— Written by ren nan</span>
      
    </div>

    

    

    <div class="post-content">
      <h2 id="vue部分">Vue部分</h2>
<p>使用了heyui控件来实现了搜索框的展示
并双向绑定了work</p>
<pre><code>&lt;!-- 搜索 --&gt;
&lt;Search v-model=&quot;work&quot; @search=&quot;search&quot;&gt;&lt;/Search&gt;


export default {
	data(){
		return{
			work:&quot;&quot;
		}
	},
}
</code></pre><p>上列操作完成后 就开始search方法
跳转到即将构造search页面
this.$router.push和window.location.href跳转的不同之处在于
this.$router.push当他这个请求的地址自己当前的地址相同的话他不会跳转（这些都是写在一个通用化组件的时候）
而另一种方法可以进行跳转</p>
<pre><code>// 搜索
search(){	
	// this.$router.push({'path':&quot;/search&quot;,&quot;query&quot;:{'work':this.work}})
    window.location.href = 'http://127.0.0.1:8080/search?work=+this.work
},
</code></pre><h1 id="search页面">search页面</h1>
<p>首先得接收通用化组件传来的参数work
然后根据获取到的work传到后端</p>
<pre><code>export default {
	data(){
		return{
			work:this.$route.query.work,
		}
	},
}
</code></pre><p>定义的axios方法<br>
请求后端的goodsearch/接口</p>
<pre><code>getgoods(){
        this.axios.get(this.adminurl + '/goodsearch/',{params:{work:this.work}}).then(res=&gt;{
            this.data = res.data
            this.isdata = res.data.length
        })
    }
</code></pre><hr>
<h2 id="django后台">django后台</h2>
<p>定义后台接口 
接受前端传过来的 关键字参数
并进行模糊查询   <strong>goodslist = Goods.objects.filter(Q(name__icontains=work)|Q(desc__icontains=work))</strong>
该orm查询 相当于 select * from goods where goods.name like &ldquo;%word%&rdquo; or goods.desc like &ldquo;%word%&rdquo;
然后将返回来的queryset序列化 并将数据传给前端
name__icontains  代表了模糊查询 
其中的i 代表了对大小写不敏感 如果去掉的话 就是敏感大小写</p>
<pre><code>    # 商品检索
class GoodsSearch(APIView):
    
    def get(self,request):
        
        work = request.GET.get('work',None)
        
        goodslist = Goods.objects.filter(Q(name__icontains=work)|Q(desc__icontains=work))

        ser = GoodsSer(goodslist,many=True)

        return Response(ser.data)

</code></pre><hr>
<p>前端接受后台返回的数据 并进行渲染处理</p>
<pre><code>&lt;ul&gt;
    &lt;li v-for=&quot;(item,index) in data&quot; :key=&quot;index&quot; style=&quot;text-align:left;&quot;&gt;
        &lt;div&gt;
            &lt;router-link :to=&quot;{path:'/item',query:{gid:item.id}}&quot;&gt;
            &lt;img :src=&quot;adminurl + '/static/upload/' + item.img&quot; width=&quot;100px&quot;&gt;
            {{item.name}}
            &lt;/router-link&gt;

        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre><p><strong>到现在一个django+vue的搜索框就完成了</strong></p>

    </div>
    
      
        <div class="pagination">
          <div class="pagination__title">
            <span class="pagination__title-h">Read other posts</span>
            <hr />
          </div>
          <div class="pagination__buttons">
            
              <span class="button previous">
                <a href="/my_blog/post/proceedingblog/">
                  <span class="button__icon">←</span>
                  <span class="button__text">python中muktiprocessing模块详解</span>
                </a>
              </span>
            
            
              <span class="button next">
                <a href="/my_blog/post/vuefuncerror/">
                  <span class="button__text">vue钩子函数中俩个连续函数的依赖错误</span>
                  <span class="button__icon">→</span>
                </a>
              </span>
            
          </div>
        </div>
      
    


    
      
        

      
    

    </div>

      </div>

      
        <footer class="footer">
  <div class="footer__inner">
    
      <a href="/my_blog/hello/" class="logo" style="text-decoration: none;">
  
    <span class="logo__mark"><svg xmlns="http://www.w3.org/2000/svg" class="greater-icon" viewBox="0 0 44 44">
  <path fill="none" d="M15 8l14.729 14.382L15 35.367"/>
</svg>
</span>
    <span class="logo__text">Welcome To MyBlog</span>
    <span class="logo__cursor"></span>
  
</a>

      <div class="copyright">
        <span>© 2020 Powered by <a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a></span>
        <span>Theme created by <a href="https://twitter.com/panr" target="_blank" rel="noopener">panr</a></span>
      </div>
    
  </div>
</footer>

<script src="/my_blog/assets/main.js"></script>
<script src="/my_blog/assets/prism.js"></script>


      
    </div>

    
  </body>
</html>
